{
    var director_item = document.getElementsByClassName('director_item');
    var temp = 3;
    var cn = true;
    var wrapper = document.getElementsByClassName('wrapper');
    var banner_item = document.getElementsByClassName('banner_item');
    var avatar = document.getElementById('avatar');
    var user_event = document.getElementById('user_event');
    var whole_wrapper = document.getElementById('whole_wrapper');
    var black_wrapper=document.getElementById('black_wrapper');
    var mclose=document.getElementById('close');
    var amend_psw=document.getElementById('amend_psw');
    var psw_changer=document.getElementById('psw_changer');
    var sub_div=document.getElementById('sub_div');
}
{
    var user_name;
    var preview=document.getElementById('preview');
    var user_name1=document.getElementById('user_name1');
    var gender1=document.getElementById('gender1');
    var direction1=document.getElementById('direction1');
    var term1=document.getElementById('term1');
    var home1=document.getElementById('home1');
    var constellation1=document.getElementById('constellation1');
    var birthday1=document.getElementById('birthday1');
    var id=document.getElementById('id');
    var psw=document.getElementById('psw');
    var tel=document.getElementById('tel');
    var qq=document.getElementById('qq');
    var wx=document.getElementById('wx');
    var email=document.getElementById('email');
    var info_motto1=document.getElementById('info_motto1');
    var pic1=document.getElementById('pic1');
    var pic2=document.getElementById('pic2');
    var pic3=document.getElementById('pic3');
}
{
    var password_former=document.getElementById('password_former');
    var password_after=document.getElementById('password_after');
    var password_confirm=document.getElementById('password_confirm');
    var myform=document.getElementById('form');
    var avatar_change=document.getElementById('avatar_change');
    var pic1_change=document.getElementById('pic1_change');
    var pic2_change=document.getElementById('pic2_change');
    var pic3_change=document.getElementById('pic3_change');
    var pinput=document.getElementsByClassName('pinput');
    var dspan=document.getElementsByClassName('dspan');
    var psw_in_wrapper=document.getElementsByClassName('psw_in_wrapper');
}
//初始化
director_item[temp].style.backgroundColor = '#2F4399';
banner_item[temp].style.display = 'block';
document.getElementById("director").addEventListener("click", (event) => {
    if ([...director_item].includes(event.target)) {
        director_item[temp].style.backgroundColor = 'transparent';
        event.target.style.backgroundColor = '#2F4399';
        temp = [...director_item].indexOf(event.target);
        switch (temp) {
            case 0:
                window.location='';
                break;
            case 1:
                window.location='';
                break;
            case 2:
                window.location='';
                break;
            case 3:
                break;
            case 4:
                window.location='';
                break;
        }
    }
});
black_wrapper.addEventListener("click",(Event)=>{
    if((!(psw_changer==Event.target)&&!(sub_div==Event.target))&&!(amend_psw==Event.target)&&!([...dspan].includes(Event.target))&&!([...pinput].includes(Event.target))&&!([...psw_in_wrapper].includes(Event.target))||mclose==Event.target){
        black_wrapper.style.display='none';
    }
})
axios({
    url:'http://jp-tyo-ntt-1.natfrp.cloud:50928/Study_Leave_System_war_exploded/User_infoServlet',
    method:'post',
    headers:{
        "Content-Type":"application/json"
    },
}).then(response=>{
    console.log(response);
    let t=response.data.data;
    user_name=t.username;
    birthday1.value=t.birthday;
    constellation1.value=t.constellation;
    direction1.value=t.direction;
    gender1.value=t.gender;
    email.value=t.email;
    id.value=t.id;
    psw.value=t.password;
    tel.value=t.phone_num;
    qq.value=t.qQ;
    info_motto1.value=t.signature;
    term1.value=t.term;
    wx.value=t.wechat;
    home1.value=t.hometown;
    user_name1.innerText=user_name;
    document.getElementById('user_name2').innerText=user_name;
}).catch(error=>{
    console.log(error);
})
avatar_change.addEventListener('input',()=>{
    let reads = new FileReader();
    let f = document.getElementById('avatar_change').files[0];
    reads.readAsDataURL(f);
    reads.onload = function (e) {
    document.getElementById('preview').src = this.result;
    };
})
pic1_change.addEventListener('input',()=>{
    let reads = new FileReader();
    let f = pic1_change.files[0];
    reads.readAsDataURL(f);
    reads.onload = function (e) {
    document.getElementById('pic1').src = this.result;
    };
})
pic2_change.addEventListener('input',()=>{
    let reads = new FileReader();
    let f = pic2_change.files[0];
    reads.readAsDataURL(f);
    reads.onload = function (e) {
    document.getElementById('pic2').src = this.result;
    };
})
pic3_change.addEventListener('input',()=>{
    let reads = new FileReader();
    let f = pic3_change.files[0];
    reads.readAsDataURL(f);
    reads.onload = function (e) {
    document.getElementById('pic3').src = this.result;
    };
})
myform.addEventListener('submit',(e)=>{
    e.preventDefault();
    let formData=new FormData(myform);
    formData.append('username',user_name);
    formData.append("avater",avatar_change.files[0]);
    formData.append('gender',gender1.value.trim());
    formData.append('term',term1.value);
    formData.append('direction',direction1.value);
    formData.append('hometown',home1.value.trim());
    formData.append('constellation',constellation1.value.trim());
    formData.append('birthday',birthday1.value);
    formData.append('id',id.value.trim());
    formData.append('psw',psw.value.trim());
    formData.append('phone_num',tel.value.trim());
    formData.append('QQ',qq.value.trim());
    formData.append('wechat',wx.value.trim());
    formData.append('email',email.value);
    formData.append('signature',info_motto1.value.trim());
    formData.append('pic1',pic1_change.files[0]);
    formData.append('pic2',pic2_change.files[0]);
    formData.append('pic3',pic3_change.files[0]);
    axios({
        url:'http://jp-tyo-ntt-1.natfrp.cloud:50928/Study_Leave_System_war_exploded/UpdateUser_infoServlet',
        method:'post',
        headers:{
            "Content-Type": "multipart/form-data",
        },
        data:formData
    }).then(response=>{
        if(response.status===200){
            alert('修改成功');
            window.location='./研学请假系统.html';
        }else{
            alert('修改失败，请重试');
        }
    }).catch(error=>{
        console.log(error);
    });
});
avatar.onclick = function () {
    if (cn) {
        user_event.style.display = 'block';
        cn = false;
    } else {
        user_event.style.display = 'none';
        cn = true;
    }
};
psw.onclick=function(){
    black_wrapper.style.display='block';
};
amend_psw.onclick=function(){
    axios({
        url:'http://jp-tyo-ntt-1.natfrp.cloud:50928/Study_Leave_System_war_exploded/UpdatePasswordServlet',
        method:'post',
        headers:{
            "Content-Type":"application/json"
        },
        data:{
            "password1":password_former,
            "password2":password_after,
            "password3":password_confirm
        }
    })
    .then(response=>{

    })
    .catch(error=>{
        console.log(error);
    })
};
user_event.onclick = () => {

};